stepsColumnCfg = {
  $hasColumn: false
  
  $lineSize: 2px

  $iconSize: 20px

  $dotSize: 8px

  $numSize: 32px
  $numFs: 20px

  $color: $color-text
  $activeColor: $color-primary
  
  $columnSpace: 20px
}

ss-func-steps($class= '.steps-list-column-dot', $config = false, $type = 'dot', $dist = 'left')
  cfg = merge({}, stepsColumnCfg, $config)
  {$class}
    ss-display-flex()
    counter-reset: num if $type == 'num'
    if (cfg.$hasColumn && $type == 'num')
      &.column
        flex-flow: column
        >.item
          flex-flow: row nowrap
          align-items: flex-start
        .item-head
          // position: initial 
          height: 100%
          width: auto
          align-items: flex-start
        .item-content
          text-align: left
          flex: 1
          margin-left: cfg.$columnSpace
        .item-title
          line-height: 34px
        .item-line
          &:after
            width: 2px
            height: 100%
            position: absolute
            left: calc(32px / 2)
            top: initial
          // &:last-child
          //   flex: initial
          //   &:after
          //     display: none
    >.item
      ss-display-flex(column)
      position: relative
      align-items: center if $dist == 'center'
      color: $color-text
      &.lr
        flex-flow: row nowrap
        align-items: flex-start
        .item-dot
          margin-top: 2px
        .item-content
          flex: 1
          .htitle
            position: relative;
            z-index: 2;
            background: #fff;
            padding-right: 4px;
        .item-line
          position: relative
        .item-line:after
          left: 0
      &:not(:last-child)
        flex: 1
      &:last-child
        flex: 1 if $dist == 'center'
        .item-line
          &:after
            display: none
      &:first-child
        margin-left: 0
      &.item-column
        >.item
          flex-flow: column
          margin-left: 0
      &.finish
        color: cfg.$activeColor
        .item-desc
          color: cfg.$activeColor
        .item-line
          &:after
            background: @color
        if $type == 'icon'
          .item-icon
            &:before
              color: @color
        else if $type == 'dot'
          .item-dot
            background: @color
        else 
          .item-num
            &:before
              content: '\e602'
              color: cfg.$activeColor
              border-color: @color
      &.active
        if $type == 'icon'
          .item-icon
            &:before
              color: cfg.$activeColor
        else if $type == 'dot'
          .item-dot
            background: cfg.$activeColor
        else 
          .item-num
            &:before
              background: cfg.$activeColor
              color: #fff
    .item-head
      position: relative;
      display: flex;
      if $dist == 'center'
        justify-content: center
        align-items: center
        width: 100%
    if $type == 'icon'
      .item-icon
        // padding-left: 0 6px
        font-size: cfg.$iconSize
        background: #fff
        position: relative;
        z-index: 2;
        ss-display-flex(row, center, center) 
    else if $type == 'dot'
      .item-dot
        display: inline-block
        width: cfg.$dotSize
        height: @width 
        border: 4px solid #fff if $type =='dot'
        background: $color-text-info
        border-radius: 100%
        position: relative;
        z-index: 2;
    else 
      .item-num
        &:before
          content: counter(num)
          counter-increment: num
          border: 1px solid
          background: #fff
          width: cfg.$numSize
          height: @width
          border-radius: @width
          font-size: cfg.$numFs
          ss-display-flex(row,center, center)
          position: relative
          z-index 2
    .item-content
      text-align: center if $dist == 'center'
    .item-line
      &:after
        content: ''
        height: cfg.$lineSize
        width: 100%
        background: $color-text-info
        position: absolute
        top: 'calc(50% - %s)' % (cfg.$lineSize / 2)
        left: 50% if $dist == 'center'
    .item-desc
      color: $color-text-info
      font-size: 12px
